import { Component, useEffect, useRef, useState } from 'react'

// 类组件
class DemoA extends Component {
    constructor() {
        super() //调用父组件的constructor  // 必须写在第一行
        console.log('constructor...')
        // 定义状态的方法
        this.state = {
            counter: 1
        }
    }
    componentDidMount() {
        console.log('componentDidMount...')
        this.refs.box.style.color = 'red'
    }
    componentDidUpdate() {
        console.log('componentDidUpdate...')
    }
    add() {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        console.log(this.props)
        let { counter } = this.state
        console.log('render...')
        return (
            <div>
                {/* 看到{}表示要写js代码 */}
                <h1>类组件--{counter}</h1>
                <button onClick={() => this.add()}>+1</button>
                <h1 ref='box'>box</h1>
            </div>
        )
    }
}

// 函数式组件
function DemoB(props) {
    // console.log(props)

    let [counter, setCounter] = useState(1)
    let box = useRef(null)

    // 函数组件没有生命周期函数，但有一个hook---useEffect(类似于vue的watchEffect)
    // 1. 此写法类似于类组件componentDidMount
    // useEffect(()=>{
    //     console.log('页面渲染完成');
    // },[])
    // 2. 此写法类似于类组件componentDidMount和componentDidUpdate
    useEffect(() => {
        console.log('页面渲染/更新完成');
        box.current.style.color='red'
    }, [counter])

    return (
        <div>
            <h1>函数式组件---{counter}</h1>
            <button onClick={() => setCounter(counter + 1)}>+1</button>
            <h1 ref={box}>box</h1>
        </div>
    )
}


export default DemoB
